<template>
  <div class="MyCenterPlugin">
   
    <router-link to="/MyTaobaoView" class="MyCenterPlugin-div1-totaobao" active-class="active"><div class="MyCenterPlugin-div1" >我的淘宝</div></router-link>
    <router-link to="/ShoppingCart" class="MyCenterPlugin-div1-tocart"
      active-class="active"><div class="MyCenterPlugin-div1">我的购物车</div></router-link
    >
    <div class="MyCenterPlugin-div1" @click="showBox1()">
      我的订单<i class="iconfont icon-xiala" :class="{changed:box1}"></i>
    </div>

    <div class="MyCenterPlugin-div-box1" v-show="box1" v-for="item in boxlist5" :key="item" @click="centerToAlreadyBuy(item)" :class="{ 'active-item': isActiveSubItem(item) }">{{item}}</div>
    <div
      class="MyCenterPlugin-div1"
      v-for="item in MyCenterPlugin_div4list"
      :key="item"
      @click="centerToBaby(item)"
      :class="{ 'active-item': isActiveItem(item) }"
    >
      {{ item }}
    </div>

    <div class="MyCenterPlugin-div1" @click="showBox2()">
      退款维权<i class="iconfont icon-xiala"  :class="{changed:box2}"></i>
    </div>
    <div
      class="MyCenterPlugin-div-box1"
      :class="{ 'active-item': isActiveItem(item) }"
      v-show="box2"
      v-for="item in boxlist2"
      :key="item"
      @click="centerToRefund(item)"
    >
      {{ item }}
    </div>
    <div class="MyCenterPlugin-div1" @click="showBox3()">
      账户设置<i class="iconfont icon-xiala"  :class="{changed:box3}"></i>
    </div>
    <div
      class="MyCenterPlugin-div-box1"
      v-show="box3"
      v-for="item in boxlist3"
      :class="{ 'active-item': isActiveItem(item) }"
      :key="item"
      @click="centerToAccount(item)"
    >
      {{ item }}
    </div>

    <div class="MyCenterPlugin-div1" @click="showBox4()">
      企业工具<i class="iconfont icon-xiala"  :class="{changed:box4}"></i>
    </div>
    <div
      class="MyCenterPlugin-div-box1"
      v-show="box4"
      v-for="item in boxlist4"
      :key="item"
    >
      {{ item }}
    </div>
    
  </div>
</template>

<style scoped>
.MyCenterPlugin-div1 .iconfont.icon-xiala{
  transition: transform 0.3s ease;
  transform: rotate(0deg);
  display: inline-block; 
}
.MyCenterPlugin-div1 .iconfont.icon-xiala.changed{
  transform: rotate(180deg);
}


.MyCenterPlugin-div1.active-item,
.MyCenterPlugin-div-box1.active-item {
  background-color: #e7cab5 !important;
  color: #ff6a00;
}

.MyCenterPlugin-div1-totaobao.active .MyCenterPlugin-div1,
.MyCenterPlugin-div1-tocart.active .MyCenterPlugin-div1 {
  background-color: #e7cab5 !important;
  color: #ff6a00;
}
.MyCenterPlugin {
  position: absolute;
  top: 135px;
  left: 100px;
  width: 210px;
  height: auto;
}

.MyCenterPlugin-div1 {
  width: 200px;
  height: 35px;
  font-size: 17px;
  margin-left: 3px;
  text-align: left;
  padding-top: 13px;
  padding-left: 5px;
  border-radius: 10px;
  cursor: pointer;
}
.MyCenterPlugin-div1-totaobao,
.MyCenterPlugin-div1-tocart {
  text-decoration: none;
  color: #2c3e50;
}
.MyCenterPlugin div:hover {
  background: rgb(210, 208, 208);
}
.MyCenterPlugin-select {
  display: max-height;
}
.MyCenterPlugin i {
  font-size: 20px;
  margin-left: 150px;
  margin-top: -20px;
  float: right;
}
.MyCenterPlugin-div-box1 {
  width: 160px;
  height: 35px;
  font-size: 17px;
  margin-left: 3px;
  text-align: left;
  padding-top: 13px;
  padding-left: 40px;
  border-radius: 10px;
  cursor: pointer;
}

</style>
<script>
export default {
  name: "MyCenterPlugin",
  mounted() {
   if(this.$route.path=="/PurchasedView"){
      this.box1=true;
  }
  if(this.$route.path=="/RefundView"){
      this.box2=true;
  }
  if(this.$route.path=="/SecuritySetting"||this.$route.path=="/PersonalData"||this.$route.path=="/AddressView"){
      this.box3=true;
  }
  },
  data() {
    return {
      box1: false,
      box2: false,
      box3: false,
      box4: false,
      boxlist2: ["退款管理", "投诉管理", "举报管理"],
      MyCenterPlugin_div4list: [
        "我的卡卷包",
        "宝贝收藏",
        "关注店铺",
        "我的足迹",
        "购买过的店铺",
        "我的发票",
        "评价管理",
      ],
      boxlist3: [
        "安全设置",
        "个人资料",
        "收货地址",
        "我的支付宝",
        "个人交易设置",
        "应用授权",
      ],
      boxlist4: ["我的报价单", "先采后付", "我的合同"],
      boxlist5: ["已买到的宝贝","我的拍卖", "我的集运"],
    };
  },
  methods: {
     isActiveSubItem(item) {
    const routeMap = {
      "已买到的宝贝": "/PurchasedView",//写另外两个时记得在钩子上加上，使之点击不会关闭上级导航栏
    };
    
    return this.$route.path === routeMap[item];
  },
    isActiveItem(item) {
    
    const routeMap = {
      "宝贝收藏": "/FavoriteBabyView",
      "关注店铺": "/FavoriteShopView",
      "我的足迹": "/MyFootView",
      "购买过的店铺": "/PurchasedShop",
      "退款管理": "/RefundView",
      "评价管理": "/EvaluationManView",
      "安全设置": "/SecuritySetting",
      "个人资料": "/PersonalData",
      "收货地址": "/AddressView",
      
    };
    return this.$route.path === routeMap[item];
  },
    showBox1() {
      this.box1 = !this.box1;
    },
    showBox2() {
      this.box2 = !this.box2;
    },
    showBox3() {
      this.box3 = !this.box3;
    },
    showBox4() {
      this.box4 = !this.box4;
    },
    centerToBaby(item){
        if(item=="宝贝收藏"){
            this.$router.push("/FavoriteBabyView")
        }
        if(item=="关注店铺"){
            this.$router.push("/FavoriteShopView")
        }
        if(item=="购买过的店铺"){
            this.$router.push("/PurchasedShop")
        }
        if(item=="我的足迹"){
            this.$router.push("/MyFootView")
        }
        if(item=="评价管理"){
          this.$router.push("/EvaluationManView")
        }
    },
    centerToAlreadyBuy(item){
        if(item=="已买到的宝贝"){
            this.$router.push("/PurchasedView")
        }
    },
    centerToRefund(item){
        if(item=="退款管理"){
            this.$router.push("/RefundView")
        }
    },
    centerToAccount(item){
        if(item=="安全设置"){
            this.$router.push("/SecuritySetting")
        }
        if(item=="个人资料"){
            this.$router.push("/PersonalData")
        }
        if(item=="收货地址"){
            this.$router.push("/AddressView")
        }
     
    
    },
  },
};
</script>